<template>
	<movable-area class="content">
		<view class="top_div">
			<u-navbar title="账单明细" :titleStyle="{ fontSize: '16px', color: '#fff' }" leftIcon="" bgColor="#5394F2"
				placeholder="true"></u-navbar>
			<view class="search flex_center">
				<u--input class="search_input" placeholder="请输入搜索内容" prefixIcon="search" v-model="keyword"
					prefixIconStyle="font-size: 22px;color: #909399" @confirm="getRefresh"></u--input>
				<text @click="getRefresh">搜索</text>
			</view>
			<u-row class="panel_div ">
				<u-col span="3">
					<view class="panel_li panel_main" @click="timeShow = true">
						<view class="li_name">
							{{ $Common.extractionTime(time)[0] }}年
						</view>
						<view class="li_value flex_start flex_items">
							{{ $Common.extractionTime(time)[1] }} <text>月份</text>
							<img src="@/static/image/time_icon.png" alt="">
						</view>
					</view>
				</u-col>
				<u-col span="1">
				</u-col>
				<u-col span="4">
					<view class="panel_li">
						<view class="li_name">
							月收入
						</view>
						<view class="li_value">
							<u-count-to color="#ffffff" :startVal="0" :endVal="totalIncome" :decimals="2"></u-count-to>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="panel_li">
						<view class="li_name">
							月支出
						</view>
						<view class="li_value">
							<u-count-to color="#ffffff" :startVal="0" :endVal="totalDisburse" :decimals="2"></u-count-to>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="list_ul">
			<scrollList class="scroll-view" ref="scroll" :page.sycn="page" :refresherEnabled="true" :scrollType="true"
				:reset="true" @loadmore="loadmore" @onLoading="onLoading" @query="getRefresh">
				<view class="list_li flex_between" v-for="(item, index) in list" :key="index" @click="addNotebook(item._id
			)">
					<img :src="$IMG_HOST + item.catalogueIcon" alt="" />
					<view class="flex1 li_content">
						<view class="top_text flex_between flex_items">
							<text>{{ item.remark ? item.remark : item.catalogueName }}</text>
							<text class="money">
								{{ item.type == 1 ? '-' : '+' }}{{ item.money }}</text>
						</view>
						<view class="tips">
							{{ item.catalogueName }}
						</view>
						<view class="tips">
							{{ $Common.showConversTime(item.creationTime, 2) }}
						</view>
					</view>
				</view>
			</scrollList>
		</view>
		<!-- 时间选择器 -->
		<u-datetime-picker ref="datetimePicker" @confirm="pickerFun" @cancel="timeShow = false" :show="timeShow"
			v-model="time" mode="year-month"></u-datetime-picker>
		<!-- 漂浮弹窗 -->
		<movable-view class="floating flex_center flex_column" direction="vertical" :x="x" :y="y">
			<img @click="addNotebook()" src="@/static/image/add_icon.png" alt="" />
		</movable-view>

	</movable-area>
</template>

<script>
import scrollList from '@/components/scroll-list/scroll-list.vue'
export default {
	components: {
		scrollList
	},
	data() {
		return {
			// 时间
			time: Number(new Date()),
			timeShow: false,
			keyword: '',//搜索关键字
			page: {
				pageNum: 1,
				pageSize: 10,
				total: 0, //总条数
				pageTotal: 0, //当前条数
				status: "loading",
			},
			list: [],
			totalIncome: 0,//总收入
			totalDisburse: 0,//总支出
			// 悬浮按钮位置
			x: 0,
			y: 0,
		};
	},
	created() {
		uni.getSystemInfo({
			success: (res) => {
				const { windowWidth, windowHeight } = res;
				this.x = windowWidth - 54;
				this.y = windowHeight - 180;
			},
		});

	},
	onLoad() { },
	onShow() {
		this.getRefresh();
	},
	watch: {
		keyword(val) {
			console.log(val)
			if (!val || val == null) {
				this.getRefresh();
			}
		}
	},
	methods: {
		pickerFun(data) {
			console.log(data)
			this.time = data.value;
			this.timeShow = false;
			this.getRefresh();
		},
		// 添加记账
		addNotebook(id) {
			let url = '/pages/appendCheck/appendCheck';
			if (id) {
				url += `?id=${id}`
			}
			uni.navigateTo({
				url: url
			})
		},
		getList() {
			const { pageSize, pageNum } = this.page;
			this.$Ajax({
				url: "account/list",
				data: {
					recordingTime: this.time,
					pageSize: pageSize,
					pageNum: pageNum,
					keyword: this.keyword,
					userId: this.$Storage.getUserInfo()._id,
				},
				method: 'get'
			}).then(res => {
				console.log(res)
				let { list, totalIncome, totalDisburse } = res.data;
				this.list = list;
				this.totalIncome = totalIncome;
				this.totalDisburse = totalDisburse;

				this.page.total = this.list.length;
				this.page.pageTotal = this.list.length;
				// this.page.status = "loadmore";
				this.page.status = "period";
			})


		},
		//   下拉刷新
		getRefresh() {
			this.page.pageNum = 1;
			this.page.status = "loading";
			this.getList();
			setTimeout(() => {
				this.$refs.scroll.resetStyle();
			}, 1000);
		},
		//点击加载
		loadmore(item) {
			console.log(item, "底部");
			this.page.pageNum++;
			this.page.status = "loading";
			this.getList();
		},
		//下拉触发加载
		onLoading(item) {
			console.log(item);
		},
	}
};
</script>

<style lang="scss">
.content {
	width: 100vw;
	height: 100vh;

	.top_div {
		// background: #5394F2;
		background: linear-gradient(180deg, #5394F2 90%, rgba(82, 147, 241, .0) 100%);
		padding-bottom: 40rpx;
	}

	.search {
		padding: 10rpx 20rpx;

		.search_input {
			background: #fff;
			border-radius: 12rpx;
		}

		text {
			margin-left: 24rpx;
			font-size: 34rpx;
		}
	}

	.panel_div {
		padding: 22rpx 24rpx 26rpx 24rpx;
		width: 100%;
		box-sizing: border-box;

		.panel_li {
			&.panel_main {
				.li_value {
					border-right: 1rpx solid #fff;
				}
			}

			.li_name {
				font-size: 24rpx;
				color: #fff;
			}

			.li_value {
				line-height: 60rpx;
				font-size: 40rpx;
				color: #fff;
				margin-top: 30rpx;

				text {
					font-size: 28rpx;
					margin-left: 4rpx;
				}

				img {
					width: 22rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}

.list_ul {
	padding: 40rpx 28rpx 100rpx;

	// .scroll-view {
	// 	height: calc(100vh - 100rpx);
	// }

	.list_li {
		margin-bottom: 40rpx;

		&:last-child {
			margin-bottom: 0;

			.li_content {
				border: 0;
			}
		}

		img {
			width: 60rpx;
			height: 60rpx;
		}

		.li_content {
			padding-left: 24rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #F2F2F2;

			.top_text {
				margin-bottom: 14rpx;

				text {
					font-size: 32rpx;
					color: #000;

					&.money {
						font-weight: bold;
					}
				}

			}

			.tips {
				font-size: 22rpx;
				color: #bbb;
				line-height: 40rpx;
			}
		}
	}
}

.floating {
	width: 100rpx;
	height: 100rpx;
	position: fixed;
	right: 4rpx;
	bottom: 200rpx;
	z-index: 111;

	img {
		width: 100%;
		height: 100%;
	}
}
</style>